<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/tooplate.css">
</head>
<body id="register">
<div class="container">
    <div class="row tm-register-row">
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-register-col-l">
            <form id="registerForm" method="post">
                <div class="input-field">
                    <input placeholder="请输入您的用户名" id="username" name="username" type="text" class="validate">
                    <span><label class="error" for="username" style="display: none;"></label></span>
                </div>
                <div class="input-field">
                    <input placeholder="请输入您的密码" id="password" name="password" type="password" class="validate">
                    <span><label class="error" for="password" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <input placeholder="请输入您的姓名" id="name" name="name" type="text" class="validate">
                    <span><label class="error" for="name" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <input type="date" id="birthday" name="birthday" placeholder="年/月/日">
                    <span><label class="error" for="birthday" style="display: none"></label></span>
                </div>
                <div class="mb-2">
                    <label class="mr-4">
                        <input class="with-gap" name="sex" type="radio" value="男" checked/>
                        <span>男</span>
                    </label>
                    <label>
                        <input class="with-gap" name="sex" type="radio" value="女"/>
                        <span>女</span>
                    </label>
                </div>
                <div class="input-field">
                    <input placeholder="请输入您的电话" id="telephone" name="telephone" type="text" class="validate">
                    <span><label class="error" for="telephone" style="display: none"></label></span>
                </div>
                <div class="input-field">
                    <input placeholder="请输入您的邮箱" id="email" name="email" type="text" class="validate">
                    <span><label class="error" for="email" style="display: none"></label></span>
                </div>
                <!--验证码-->
                <input placeholder="请输入验证码" type="text" id="check" name="check" class="validate">
                <span><label class="error" for="check" style="display: none"></label></span>
                <div class="input-field">
                    <img src="/photograph/check/checkCode" height="60px" alt="" onclick="changeCheckCode(this)" style="cursor: pointer;float: right">
                    <script type="text/javascript">
                        //图片点击事件
                        function changeCheckCode(img) {
                            img.src="/photograph/check/checkCode?"+new Date().getTime();
                        }
                    </script>
                    <input id="registerButton" type="button" style="margin-right: 36px"
                           class="waves-effect btn-large btn-large-white px-4 black-text" value="Register"></input>
                </div>
            </form>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 tm-register-col-r">
            <header class="mb-5">
                <h3 class="mt-0 text-white">REGISTER Yourself</h3>
                <p class="grey-text">Aenean tincidunt, enim nec blandit lobortis, ante enim ultrices eros, et laoreet
                    augue libero id nunc.
                    Proin semper feugiat ultrices.</p>
                <p class="grey-text">Aenean a efficitur magna, sed dignissim odio. Praesent pretium lectus ac nunc
                    ultrices, ac volutpat orci
                    viverra.
                </p>
              <h3>  <a href="login.html" class="white-text small">If you have an account, log in immediately</a></h3>
            </header>

        </div>
    </div>
    <footer class="row tm-mt-big mb-3">
        <div class="col-xl-12">
            <p class="text-center grey-text text-lighten-2 tm-footer-text-small">
                Copyright &copy; 2018 Company Name

                - <a rel="nofollow" href="http://www.tooplate.com/view/2105-input">Input</a> by
                <a rel="nofollow" href="http://tooplate.com" class="tm-footer-link">Tooplate</a>
            </p>
        </div>
    </footer>
</div>

<!--<script src="js/jquery-3.2.1.slim.min.js"></script>-->
<!--<script src="js/materialize.min.js"></script>-->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
    $(function () {
        $("#registerButton").click(function () {
            // 表单验证通过才要注册
            var isPass = $("#registerForm").valid();
            if (!isPass) {
                return;
            }
            $.post("/photograph/user/register",
                $("#registerForm").serialize(),
                function (data) {
                    if (data.flag) {
                        // 注册成功 页面跳转
                        location.href = "/photograph/register_ok.html";
                    } else { // 注册失败
                        $("#errorMsg").html(data.errorMsg);
                    }
                },
                "json");
        })

        $("#registerForm").validate({
            rules: {
                username: {
                    required:true,
                    // 正则表达式
                    checkUsername: true,
                    // 用户名不能重复
                    checkUsernameExists: true
                },
                password: {
                    required:true,
                    checkPassword: true
                },
                email: {
                    required: true,
                    email: true,
                },
                name: {
                    required: true,
                },
                telephone: {
                    required: true,
                },
                birthday: {
                    required: true,
                },
                check: {
                    required: true,
                    // 验证码是否正确
                    checkCode: true,
                }
            },
            messages: {
                username: {
                    required:"用户名不能为空",
                    checkUsername: "必须是字母开头,至少6位",
                    checkUsernameExists: "用户名已存在"
                },
                password: {
                    required:"请输入密码",
                    checkPassword: "必须是字母开头,至少6位"
                },
                email: {
                    required: "邮箱不能为空",
                    email: "请输入正确的邮箱格式"
                },
                name: {
                    required: "名字不能为空"
                },
                telephone: {
                    required: "联系方式不能为空",

                },
                birthday: {
                    required: "出生日期不能为空"
                },
                 check: {
                     required: "验证码不能为空",
                     // 验证码是否正确
                     checkCode: "验证码错误",
                 }
            }


        });
        // 判断用户名格式是否规范
        $.validator.addMethod("checkUsername",
            function (value, element, params) {
                var reg = /^[a-zA-Z_]\w{5,15}$/;
                return reg.test(value);
            });
        // 判断用户密码格式是否正确
        $.validator.addMethod("checkPassword",
            function (value, element, params) {
                var reg = /^[a-zA-Z_]\w{5,15}$/;
                return reg.test(value);
            });
        // 判断用户名是否存在
        $.validator.addMethod("checkUsernameExists",
            function (value, element, params) {
                var isPass = false;
                $.ajax({
                    async: false,
                    url: "/photograph/user/checkUsername",
                    data: {username: value},
                    success: function (data) {
                        isPass = data.flag;
                    },
                    dataType: "json"
                });
                return isPass;
            });
        // 判断验证码是否正确
        $.validator.addMethod("checkCode",
            function (value,element,params) {
                var isPass = false;
                $.ajax({
                    async: false,
                    url: "/photograph/check/checkCodeValue",
                    data: {check: value},
                    success: function(data) {
                        isPass = data.flag;
                    },
                    dataType: "json"
                });
                return isPass;
            });
    })
    // $(document).ready(function () {
    //     $('select').formSelect();
    // });
</script>
</body>
</html>